<template>
    <view class="page">
        <view class="circle-create-content">
            <view class="content-list-item">
                <view class="list-item-name">圈子名称</view>
                <view class="list-item-input">
                    <input type="text" v-model="circle_name" placeholder="请输入" placeholder-style="color: #BBBCBF;" />
                </view>
            </view>
            <view class="content-list-item">
                <view class="list-item-name">圈子类型</view>
                <view class="list-item-input">
                    <view v-for="item in circleSort" :key="item.id" :class="{'type-btn':true,'on':classify_id==item.id}" @click="changeClassify(item.id)">{{item.name}}</view>
                </view>
            </view>
            <view class="content-list-item">
                <view class="list-item-name">地区/省市</view>
                <view :class="!address.province?'list-item-input fontgrey':'list-item-input'" @click="showAreaPicker">{{address|filterAddress}}</view>
            </view>
            <view class="content-list-item">
                <view class="list-item-name">建圈理由</view>
                <view class="list-item-input">
                    <textarea v-model="create_reason" placeholder="请输入" placeholder-style="color: #BBBCBF;"></textarea>
                </view>
            </view>
        </view>
        <view class="circle-create-btn">
            <button @click="addCreateCircleApplication">提交</button>
        </view>
        <!-- 地址选择器 -->
        <areaPicker @getArea="getArea" @getVisible="getVisible" ref="areaPicker"/>
    </view>
</template>

<script>
    import areaPicker from '@/pages/components/areaPicker'
    export default {
        name: "circlebarCreate",
        components: {areaPicker},
        data(){
            return{
                showPopoupFlag:false,
                circle_name:'',
                create_reason:'',
                classify_id: '',
                circleSort: [],
                address:{
                    province:'',
                    city:''
                },
                fontColor:true
            }
        },
        onLoad(query){

        },
        onShow(){
          this.getCircleApplicationPermission();
          this.getCircleClassify();
        },
        filters:{
            filterAddress(e){
                if(!e.province){
                    return '请选择'
                }else{
                    return `${e.province.name}-${e.city.name}`
                }

            }
        },
        methods:{
            //检查是否具有创建圈子的基础条件（是否绑定了手机）
            async getCircleApplicationPermission(){
                let userToken=uni.getStorageSync('userToken')
                let res=await this.$api.getCircleApplicationPermission({user_token:userToken});
                if(res.data.level=='error'){
                    uni.showToast({
                        icon:'none',
                        title:res.data.message,
                        duration: 3000
                    })
                    setTimeout(function () {
                        uni.navigateTo({
                            url:'/pages/login/register/register'
                        })
                    },3000)
                }
            },
            //提交创建圈子的申请
            async addCreateCircleApplication(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    circle_name: this.circle_name,
                    classify_id: this.classify_id,
                    province: this.address.province.name,
                    city: this.address.city.name,
                    reason: this.create_reason
                }
                const res = await this.$api.addCreateCircleApplication(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title:res.data.message,
                        duration: 2000
                    })
                    setTimeout(function () {
                        uni.switchTab({
                            url:'/pages/circlebar/circlebar'
                        })
                    },2000)
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message,
                        duration: 2000
                    })
                    setTimeout(function () {
                        uni.switchTab({
                            url:'/pages/circlebar/circlebar'
                        })
                    },2000)
                }
            },
            //获取圈子分类列表
            async getCircleClassify(){
                let params = {
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.getCircleClassify(params);
                if (res.data.level == 'success'){
                    this.circleSort = res.data.data;
                    this.classify_id = res.data.data[0].id;
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //选择圈子类型
            changeClassify(id){
                this.classify_id = id;
            },
            showAreaPicker(){
                //显示地址选择
                this.showPopoupFlag=true;
                this.$refs.areaPicker.toggleVisible()

            },
            getArea(e){
                //获取所在地
                this.address=e;
            },
        }
    }
</script>

<style scoped lang="scss">
    .page{
        background: #F1F4F7;
        min-height: 100vh;
        padding: 16rpx 0;
    }
    .circle-create-content{
        background: #FFFFFF;
        .content-list-item{
            display: flex;
            flex-direction: row;
            justify-content: left;
            height: 140rpx;
            .list-item-name{
                height: 140rpx;
                line-height: 140rpx;
                padding: 0 0 0 30rpx;
                width: 30%;
                font-size: 28rpx;
            }
            .fontgrey{
                color: #BBBCBF;
            }
            .list-item-input{
                width: calc(70% - 50rpx);
                min-height: 140rpx;
                display: flex;
                flex-direction: row;
                justify-content: left;
                flex-wrap: wrap;
                align-items: center;
                padding: 0 30rpx 0 20rpx;
                font-size: 28rpx;
                /*line-height: 140rpx;*/
                input{
                    height: 140rpx;
                    line-height: 140rpx;
                    font-size: 28rpx;
                    width: 100%;
                }
                textarea{
                    width: 100%;
                    height: 64rpx;
                    /*line-height: 140rpx;*/
                    font-size: 28rpx;
                    padding: 56rpx 0rpx 20rpx 0rpx;
                }
                .type-btn{
                    background: #F7F7F7;
                    padding: 12rpx 36rpx;
                    border-radius: 24rpx;
                    font-size: 24rpx;
                    text-align: center;
                    margin-left: 14rpx;
                }
                .type-btn.on{
                    background: #FFE226;
                }
            }
        }
        .content-list-item:last-child{
            display: flex;
            flex-direction: row;
            justify-content: left;
            padding: 56rpx 0rpx 20rpx 0rpx;;
            height: 160rpx;
            .list-item-name{
                height: 140rpx;
                line-height: 28rpx;
                padding: 0 0 0 30rpx;
                width: 30%;
                font-size: 28rpx;
            }
            .list-item-input{
                width: calc(70% - 50rpx);
                min-height: 160rpx;
                display: flex;
                flex-direction: row;
                justify-content: left;
                flex-wrap: wrap;
                align-items: flex-start;
                padding: 0 30rpx 0 20rpx;
                font-size: 28rpx;
                textarea{
                    width: 100%;
                    height: 160rpx;
                    /*line-height: 140rpx;*/
                    font-size: 28rpx;
                    padding: 0rpx 0rpx 0rpx 0rpx;
                }
            }
        }
    }
    .circle-create-btn{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 140rpx;
        background: #FFFFFF;
        button{
            margin: 20rpx 40rpx;
            background: #FFE226;
            line-height: 100rpx;
            text-align: center;
            font-size: 32rpx;
            font-weight: bolder;
            color: #000000;
        }
    }
</style>